	<template>
		<div>
			<indexHead/>

			<!-- 商品页面主体 start -->
		<div class="main w1210 mt10 bc">
			<!-- 面包屑导航 start -->
			<div class="breadcrumb">
				<h2>当前位置：<a href="">首页</a> > <a href="">{{itemResult.cat1_info.cat_name}}</a> > <a href="">{{itemResult.cat2_info.cat_name}}</a>
					> {{itemResult.cat3_info.cat_name}}</h2>
			</div>
			<!-- 面包屑导航 end -->

			<!-- 主体页面左侧内容 start -->
			<div class="goods_left fl">
				<!-- 相关分类 start -->
				<div class="related_cat leftbar mt10">
					<h2><strong>相关分类</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li><a href="">笔记本</a></li>
							<li><a href="">超极本</a></li>
							<li><a href="">平板电脑</a></li>
						</ul>
					</div>
				</div>
				<!-- 相关分类 end -->

				<!-- 相关品牌 start -->
				<div class="related_cat	leftbar mt10">
					<h2><strong>同类品牌</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li><a href="">D-Link</a></li>
							<li><a href="">戴尔</a></li>
							<li><a href="">惠普</a></li>
							<li><a href="">苹果</a></li>
							<li><a href="">华硕</a></li>
							<li><a href="">宏基</a></li>
							<li><a href="">神舟</a></li>
						</ul>
					</div>
				</div>
				<!-- 相关品牌 end -->

				<!-- 热销排行 start -->
				<div class="hotgoods leftbar mt10">
					<h2><strong>热销排行榜</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li></li>
						</ul>
					</div>
				</div>
				<!-- 热销排行 end -->


				<!-- 浏览过该商品的人还浏览了  start 注：因为和list页面newgoods样式相同，故加入了该class -->
				<div class="related_view newgoods leftbar mt10">
					<h2><strong>浏览了该商品的用户还浏览了</strong></h2>
					<div class="leftbar_wrap">
						<ul>
							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/relate_view1.jpg" alt="" /></a></dt>
									<dd><a href="">ThinkPad E431(62771A7) 14英寸笔记本电脑 (i5-3230 4G 1TB 2G独显 蓝牙 win8)</a></dd>
									<dd><strong>￥5199.00</strong></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/relate_view2.jpg" alt="" /></a></dt>
									<dd><a href="">ThinkPad X230i(2306-3V9） 12.5英寸笔记本电脑 （i3-3120M 4GB 500GB 7200转 蓝牙 摄像头 Win8）</a></dd>
									<dd><strong>￥5199.00</strong></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/relate_view3.jpg" alt="" /></a></dt>
									<dd><a href="">T联想（Lenovo） Yoga13 II-Pro 13.3英寸超极本 （i5-4200U 4G 128G固态硬盘 摄像头 蓝牙 Win8）晧月银</a></dd>
									<dd><strong>￥7999.00</strong></dd>
								</dl>
							</li>

							<li>
								<dl>
									<dt><a href=""><img src="~/assets/images/relate_view4.jpg" alt="" /></a></dt>
									<dd><a href="">联想（Lenovo） Y510p 15.6英寸笔记本电脑（i5-4200M 4G 1T 2G独显 摄像头 DVD刻录 Win8）黑色</a></dd>
									<dd><strong>￥6199.00</strong></dd>
								</dl>
							</li>

							<li class="last">
								<dl>
									<dt><a href=""><img src="~/assets/images/relate_view5.jpg" alt="" /></a></dt>
									<dd><a href="">ThinkPad E530c(33662D0) 15.6英寸笔记本电脑 （i5-3210M 4G 500G NV610M 1G独显 摄像头 Win8）</a></dd>
									<dd><strong>￥4399.00</strong></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<!-- 浏览过该商品的人还浏览了  end -->

				<!-- 最近浏览 start -->
				<div class="viewd leftbar mt10">
					<h2><a href="">清空</a><strong>最近浏览过的商品</strong></h2>
					<div class="leftbar_wrap">
						<dl>
							<dt><a href=""><img src="~/assets/images/hpG4.jpg" alt="" /></a></dt>
							<dd><a href="">惠普G4-1332TX 14英寸笔记...</a></dd>
						</dl>

						<dl class="last">
							<dt><a href=""><img src="~/assets/images/crazy4.jpg" alt="" /></a></dt>
							<dd><a href="">直降200元！TCL正1.5匹空调</a></dd>
						</dl>
					</div>
				</div>
				<!-- 最近浏览 end -->

			</div>
			<!-- 主体页面左侧内容 end -->

			<!-- 商品信息内容 start -->
			<div class="goods_content fl mt10 ml10">
				<!-- 商品概要信息 start -->
				<div class="summary">
					<h3><strong>{{itemResult.goods_name}}</strong></h3>

					<!-- 图片预览区域 start -->
					<div class="preview fl">
						<div class="midpic">
							<a :href="itemResult.logo.xbiglogo" class="jqzoom" rel="gal1">
								<!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
								<img :src="itemResult.logo.biglogo" alt="" /> <!-- 第一幅图片的中图 -->
							</a>
						</div>

						<!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

						<div class="smallpic">
							<a href="javascript:;" id="backward" class="off"></a>
							<a href="javascript:;" id="forward" class="on"></a>
							<div class="smallpic_wrap">
								<ul>
									<li class="cur" v-for="(v,k) in itemResult.photos" :key="k">
										<a href="javascript:void(0);" :rel="'{gallery: \'gal1\', smallimage: \''+v.biglogo+'\',largeimage: \''+v.xbiglogo+'\'}'"><img
											 :src="v.smlogo"></a>
									</li>
								</ul>
							</div>

						</div>
					</div>
					<!-- 图片预览区域 end -->

					<!-- 商品基本信息区域 start -->
					<div class="goodsinfo fl ml10">
						<ul>
							<li><span>商品编号： </span>{{skuid}}</li>
							<li class="market_price"><span>定价：</span><em>￥{{itemResult.market_price}}</em></li>
							<li class="shop_price"><span>本店价：</span> <strong>￥{{itemResult.shop_price}}</strong> <a href="">(降价通知)</a></li>
							<li><span>上架时间：</span>{{itemResult.on_sale_date}}</li>
							<li class="star"><span>商品评分：</span> <strong></strong><a href="">(已有{{itemResult.comment_count}}人评价)</a></li>
							<!-- 此处的星级切换css即可 默认为5星 star4 表示4星 star3 表示3星 star2表示2星 star1表示1星 -->
						</ul>
						<form action="" method="post" class="choose">
							<ul>
								<li class="product" v-for="(v,k) in itemResult.spec_list" :key="k">
									<dl>
										<dt>{{v.spec_name}}：</dt>
										<dd>
											<a v-for="(v1,k1) in v.options" :key="k1" :class="{selected:itemResult.spec_info.id_list.indexOf(v.id+':'+v1.id)!=-1}"
											 href="javascript:;" @click.prevent="specSelected(v.id,v1.id)">{{v1.option_name}} <input type="radio" name="color"
												 value="黑色" checked="checked" /></a>
											<input type="hidden" name="" value="" />
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>购买数量：</dt>
										<dd>
											<a href="javascript:;" @click.prevent="munis" id="reduce_num"></a>
											<input type="text" v-model="buyCount" value="1" class="amount" />
											<a href="javascript:;" @click.prevent="plus" id="add_num"></a>
										</dd>
									</dl>
								</li>

								<li>
									<dl>
										<dt>&nbsp;</dt>
										<dd>
											<input type="submit" value="" @click.prevent="addCart" class="add_btn" />
										</dd>
									</dl>
								</li>

							</ul>
						</form>
					</div>
					<!-- 商品基本信息区域 end -->
				</div>
				<!-- 商品概要信息 end -->

				<div style="clear:both;"></div>

				<!-- 商品详情 start -->
				<div class="detail">
					<div class="detail_hd">
						<ul>
							<li class="first"><span>商品介绍</span></li>
							<li class="on"><span>商品评价</span></li>
							<li><span>售后保障</span></li>
						</ul>
					</div>
					<div class="detail_bd">
						<!-- 商品介绍 start -->
						<div class="introduce detail_div none">
							<div class="attr mt15">
								<ul>
									<li><span>商品名称：</span>ThinkPadX230(2306 3T4）</li>
									<li><span>商品编号：</span>979631</li>
									<li><span>品牌：</span>联想（Thinkpad）</li>
									<li><span>上架时间：</span>2013-09-18 17:58:12</li>
									<li><span>商品毛重：</span>2.47kg</li>
									<li><span>商品产地：</span>中国大陆</li>
									<li><span>显卡：</span>集成显卡</li>
									<li><span>触控：</span>非触控</li>
									<li><span>厚度：</span>正常厚度（>25mm）</li>
									<li><span>处理器：</span>Intel i5</li>
									<li><span>尺寸：</span>12英寸</li>
								</ul>
							</div>

							<div class="desc mt10">
								<!-- 此处的内容 一般是通过在线编辑器添加保存到数据库，然后直接从数据库中读出 -->
								<img src="~/assets/images/desc1.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc2.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc3.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc4.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc5.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc6.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc7.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc8.jpg" alt="" />
								<p style="height:10px;"></p>
								<img src="~/assets/images/desc9.jpg" alt="" />
							</div>
						</div>
						<!-- 商品介绍 end -->

						<!-- 商品评论 start -->
						<div class="comment detail_div mt10">
							<div class="comment_summary">
								<div class="rate fl">
									<strong><em>{{Math.ceil(comments.ratio.goods/comments.comment_count*100)}}</em>%</strong> <br />
									<span>好评度</span>
								</div>
								<div class="percent fl">
									<dl>
										<dt>好评（{{Math.ceil(comments.ratio.goods/comments.comment_count*100)}}%）</dt>
										<dd>
											<div :style="{width:comments.ratio.goods/comments.comment_count*100+'px'}"></div>
										</dd>
									</dl>
									<dl>
										<dt>中评（{{Math.ceil(comments.ratio.common/comments.comment_count*100)}}%）</dt>
										<dd>
											<div :style="{width:comments.ratio.common/comments.comment_count*100+'px'}"></div>
										</dd>
									</dl>
									<dl>
										<dt>差评（{{Math.ceil(comments.ratio.bad/comments.comment_count*100)}}%）</dt>
										<dd>
											<div :style="{width:comments.ratio.bad/comments.comment_count*100+'px'}"></div>
										</dd>
									</dl>
								</div>
								<div class="buyer fl">
									<dl>
										<dt>买家印象：</dt>
										<dd v-for="(v,k) in comments.impressions" :key="k"><span>{{v.title}}</span><em>({{v.count}})</em></dd>
									</dl>
								</div>
							</div>

							<div v-for="(v,k) in comments.comments" :key="k" class="comment_items mt10">
								<div class="user_pic">
									<dl>
										<dt><a href=""><img :src="v.user.face" alt="" /></a></dt>
										<dd><a href="">{{v.user.name}}</a></dd>
									</dl>
								</div>
								<div class="item">
									<div class="title">
										<span>2013-03-11 22:18</span>
										<strong :class="'star star'+v.star"></strong> <!-- star5表示5星级 start4表示4星级，以此类推 -->
									</div>
									<div class="comment_content">
										<dl>
											<dt>评论：</dt>
											<dd>{{v.content}}</dd>
										</dl>
										<dl>
											<dt>购买日期：</dt>
											<dd>{{v.created_at}}</dd>
										</dl>
									</div>
									<div class="btns">
										<a href="" class="reply">回复(0)</a>
										<a href="" class="useful">有用(0)</a>
									</div>
								</div>
								<div class="cornor"></div>
							</div>

							<div class="comment_items mt10">
								<div class="user_pic">
									<dl>
										<dt><a href=""><img src="~/assets/images/user2.jpg" alt="" /></a></dt>
										<dd><a href="">小宝贝</a></dd>
									</dl>
								</div>
								<div class="item">
									<div class="title">
										<span>2013-10-01 14:10</span>
										<strong class="star star4"></strong> <!-- star5表示5星级 start4表示4星级，以此类推 -->
									</div>
									<div class="comment_content">
										<dl>
											<dt>心得：</dt>
											<dd>外观漂亮同，还在使用过程中。</dd>
										</dl>
										<dl>
											<dt>型号：</dt>
											<dd>i5 8G内存版</dd>
										</dl>
										<dl>
											<dt>购买日期：</dt>
											<dd>2013-11-20</dd>
										</dl>
									</div>
									<div class="btns">
										<a href="" class="reply">回复(0)</a>
										<a href="" class="useful">有用(0)</a>
									</div>
								</div>
								<div class="cornor"></div>
							</div>

							<div class="comment_items mt10">
								<div class="user_pic">
									<dl>
										<dt><a href=""><img src="~/assets/images/user3.jpg" alt="" /></a></dt>
										<dd><a href="">天使</a></dd>
									</dl>
								</div>
								<div class="item">
									<div class="title">
										<span>2013-03-11 22:18</span>
										<strong class="star star5"></strong> <!-- star5表示5星级 start4表示4星级，以此类推 -->
									</div>
									<div class="comment_content">
										<dl>
											<dt>心得：</dt>
											<dd>挺好的，物超所值，速度挺好，WIN8用起来也不错。</dd>
										</dl>
										<dl>
											<dt>优点：</dt>
											<dd>散热很好，配置不错</dd>
										</dl>
										<dl>
											<dt>不足：</dt>
											<dd>暂时还没发现缺点哦！</dd>
										</dl>
										<dl>
											<dt>购买日期：</dt>
											<dd>2013-11-24</dd>
										</dl>
									</div>
									<div class="btns">
										<a href="" class="reply">回复(0)</a>
										<a href="" class="useful">有用(0)</a>
									</div>
								</div>
								<div class="cornor"></div>
							</div>

							<!-- 分页信息 start -->
							<pagination :total_page="total_page" :page="commentMap.page" @page_changed="pageChanged"></pagination>
							<!-- 分页信息 end -->

							<!--  评论表单 start-->
							<div class="comment_form mt20">
								<form action="">
									<ul>
										<li>
											<label for=""> 评分：</label>
											<input type="radio" name="grade" /> <strong class="star star5"></strong>
											<input type="radio" name="grade" /> <strong class="star star4"></strong>
											<input type="radio" name="grade" /> <strong class="star star3"></strong>
											<input type="radio" name="grade" /> <strong class="star star2"></strong>
											<input type="radio" name="grade" /> <strong class="star star1"></strong>
										</li>

										<li>
											<label for="">评价内容：</label>
											<textarea name="" id="" cols="" rows=""></textarea>
										</li>
										<li>
											<label for="">&nbsp;</label>
											<input type="submit" value="提交评论" class="comment_btn" />
										</li>
									</ul>
								</form>
							</div>
							<!--  评论表单 end-->

						</div>
						<!-- 商品评论 end -->

						<!-- 售后保障 start -->
						<div class="after_sale mt15 none detail_div">
							<div>
								<p>本产品全国联保，享受三包服务，质保期为：一年质保 <br />如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</p>
								<p>售后服务电话：800-898-9006 <br />品牌官方网站：http://www.lenovo.com.cn/</p>

							</div>

							<div>
								<h3>服务承诺：</h3>
								<p>本商城向您保证所售商品均为正品行货，京东自营商品自带机打发票，与商品一起寄送。凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由本商城联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。本商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！</p>

								<p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>

							</div>

							<div>
								<h3>权利声明：</h3>
								<p>本商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东商城重要的经营资源，未经许可，禁止非法转载使用。</p>
								<p>注：本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。</p>

							</div>
						</div>
						<!-- 售后保障 end -->

					</div>
				</div>
				<!-- 商品详情 end -->


			</div>
			<!-- 商品信息内容 end -->


		</div>
		<!-- 商品页面主体 end -->
		</div>
	</template>

<script>

import indexHead from '~/components/head.vue'
import pagination from '~/components/pagination.vue'

import axios from 'axios'
import goodApi from '~/api/good.js'
import cartApi from '~/api/cart.js'
import '~/assets/style/goods.css'
import '~/assets/style/common.css'


export default {
    asyncData({params}){
		// console.log(params.id)
		//创建方法，调用查询商品详情方法，查询商品详情数据,评论信息
         return axios.all([ goodApi.showItem(), goodApi.showComments()])
            .then(axios.spread(function (res1, res2) {
                // 两个请求现在都执行完成
                return{
                    itemResult:res1.data,
                    total_count:res1.data.count,
                    total_page:Math.ceil(res1.data.count / 30),
                    commentMap:{spuid:res1.data.spuid},
                    conditionResult: res2.data,
                    comments:res2.data,
					//计算总页码
					total_page : Math.ceil(res2.data / 10),
					skuid:params.id
            }
        }));
    },
    components:{
        indexHead,
        pagination
    },
    data(){
        return {
            //定义对象，接受后台返回的数据
            itemResult:{},
            // skuid:'abc',
            // skuid: window.location.search ? location.search.match(/skuid=(\d+)/)[1] : '',
            comments:{},
            total_page: 0,
            buyCount: 1,
            commentMap: {
                spuid: 1,
                limit: 10,
                per_page: 10,
                page: 1,
                sort_by: 'created_at',
                sort_way: 'desc'
            },
            token:''
        }
 
    },
	methods: {
		//定义选中事件，选中不同sku组合，将会把不同组合放入spec_info,同时skuID发生变化。
		specSelected: function (specId, optionId) {

			//正则匹配，应该替换哪个字符
			let reg = new RegExp(specId + ":\\d+");
			//替换
			let newSpec = this.itemResult.spec_info.id_list.replace(reg, specId + ":" + optionId);

			//替换结束后，skuid发生变化
			//循环sku列表，判断选中是哪个skuId
			for (var i = 0; i < this.itemResult.sku_list.length; i++) {
				//判断此时选中是否哪个sku
				if (this.itemResult.sku_list[i].id_list == newSpec) {
					//表示此时选中的就是此规格
					//调用到此skuId商品详情页面
					location.href = "goods.html?skuid=" + this.itemResult.sku_list[i].skuid;
				}
			}



		},
		//评论分页查询
		pageChanged: function (page) {
			this.commentMap.page = page
			this.findItem();
		},
		//添加购物车数量加1操作
		munis:function(){
			//判断商品的数量是否小于1
			if(this.buyCount<=1){
				return;
			}
			this.buyCount--;
		},

		//添加购物车数量减1操作
		plus:function(){
			this.buyCount++;
		},

		//添加购物车
		addCart: function () {
			//判断此时用户是否处于登录状态
			if(this.token!=null){
				//此时用户处于登录状态，向后台发送请求，添加购物车数据
				cartApi.addToCart({skuid:this.skuid,count:this.buyCount}).then(res=>{
					//判断添加是否成功
					if(res.data.errno==0){
						//跳转购物车添加成功页面
						// location.href = "flow1.html";	
						this.$router.push('/order/flow1')
					}else{
						return;
					}
				})

				return;

			}

			//1，构造向购物车中添加的数据结构
			//对象
			var goods = {
				skuid: this.skuid,
				goods_name: this.itemResult.goods_name,
				price: this.itemResult.shop_price,
				count: this.buyCount,
				checked: true,
				midlogo: this.itemResult.logo.biglogo,
				spec_info: this.itemResult.spec_info.id_text
			}

			//2,从localStorage中获取购物车数据
			//字符串
			var cart = localStorage.getItem("cart");
			//3,判断购物车数据是否存在
			if (cart != null) {

				//定义标识，判断是否是新添加的商品
				var isNew = true;

				//如果存在
				//4，购物车中是否有相同的商品
				//把购物车数据转换json对象
				cart = JSON.parse(cart);
			
				//循环购物车数据,判断是否有相同的商品
				for (var i = 0; i < cart.length; i++) {
					//判断,如果购物车中原有的商品skuid和新添加的商品skuid相等，说明添加的是相同的商品
					if (cart[i].skuid == goods.skuid) {
						//商品的数量相加
						cart[i].count += goods.count;

						//有相同商品，表示是已经添加过得商品
						isNew = false;

						break;
					}
				}

				if (isNew) {
					//没有相同商品,直接添加商品即可
					cart.push(goods);
				}

			} else {
				//如果购物车没有数据，创建数组，把商品对象数据添加到购物车数组中
				//new cart[].push(goods)
				cart = [goods];
			}

			//把购物车列表数据存入localStorage
			localStorage.setItem("cart", JSON.stringify(cart));

			//跳转购物车添加成功页面
			// location.href = "flow1.html";
			this.$router.push('/order/flow1')
		}

	},
	mounted: function () {
		this.cart = window.localStorage.getItem("cart")
		this.token = window.localStorage.getItem('token')
		//页面一刷新，此放大镜效果就会立即加载
		$('.jqzoom').jqzoom({
			zoomType: 'standard',
			lens: true,
			preloadImages: false,
			alwaysOn: false,
			title: false,
			zoomWidth: 400,
			zoomHeight: 400
		});

		//商品缩略图左右移动效果
		//点击后退
		$("#backward").click(function () {
			var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
			var offset = left + 62;
			if (offset <= 0) {
				$(".smallpic_wrap ul").stop(true, false).animate({ left: offset }, "slow", '', function () {
					//动画完成之后，判断是否到了左边缘
					if (parseInt($(".smallpic_wrap ul").css("left")) >= 0) {
						$("#backward").removeClass("on").addClass("off");
					}
				});
				//开启右边的按钮
				$("#forward").removeClass("off").addClass("on");
			}

			$(this).blur(); //去除ie 虚边框
		});

		//点击前进
		$("#forward").click(function () {
			var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
			var len = $(".smallpic_wrap li").size() * 62; //获取图片的整体宽度(图片数 * 图片宽度)558
			var offset = left - 62;
			if (offset >= -(len - 62 * 5)) {
				$(".smallpic_wrap ul").stop(true, false).animate({ left: offset }, "slow", '', function () {
					//判断是否到了右边缘
					if (parseInt($(".smallpic_wrap ul").css("left")) <= -(len - 62 * 5)) {
						$("#forward").removeClass("on").addClass("off");
					}
				});
				//开启左边的按钮
				$("#backward").addClass("on").removeClass("off");

			}

			$(this).blur(); //去除ie 虚边框
		});

		//选择货品，如颜色、版本等
		$(".product a").click(function () {
			$(this).addClass("selected").siblings().removeClass("selected");
			$(this).find("input").attr({ checked: "checked" });
			//去除虚边框
			$(this).blur();
		});
	}
}
</script>

<style>

</style>
